<template>
  <div id="app">
    <navbar/>
    <el-row :gutter="20">
      <el-col :span="19">
        <timer-chart ref="timerChart"
                     :speed="speed" 
                     :pulse="pulse" 
                     :start-play-time="currentTime" 
                     :time-step.sync="timeStep"/>
        <silder-bar :pulse.sync="pulse" 
                    :speed.sync="speed" 
                    :trade-date.sync="tradeDate" 
                    :time-step.sync="timeStep"
                    :current-time.sync="currentTime"
                    @silderChange="silderChange"
                    @timeBackword="timeBackword"
                    @timeForward="timeForward"
                    />
      </el-col>
      <el-col :span="4">
        <el-card :body-style="{ padding: '10px' }" class="bottom">
          <base-table :data="table1.data"
                      :columns="table1.columns"
                      thead-classes="text-primary">
          </base-table>
        </el-card>

        <el-card :body-style="{ padding: '10px' }" class="bottom">
          <base-table :data="table2.data"
                      :columns="table2.columns"
                      thead-classes="text-primary">
          </base-table>
        </el-card>
      </el-col>
      
    </el-row>
    
  </div>  
</template>

<script>
import mdata from '../static/tmpData'
import TimerChart from './components/TimerChart'
import SilderBar from './components/SilderBar'
import BaseTable from "./components/BaseTable"
import navbar from "./components/Navbar"
import { indexOfRow } from './utils/categories'

export default {
  name: 'app',
  components: {
    TimerChart,
    SilderBar,
    BaseTable,
    navbar
  },
  data () {
    return {
      speed: 1000,
      currentTime: '21:00',
      tradeDate: '',
      pulse: false,
      timeStep: 0,
      chartData: null,
      table1: {
        title: "leve2",
        columns: ['name','salary','id'],
        data: [{
          id: 1,
          name: "买一",
          salary: "36.738",
          country: "Niger",
          fontColor: "green",
        },
        {
          id: 2,
          name: "买二",
          salary: "23,789",
          country: "Curaçao",
          fontColor: "green"
        },
        {
          id: 3,
          name: "买三",
          salary: "56,142",
          country: "Netherlands",
          fontColor: "green"
        },
        {
          id: 4,
          name: "买四",
          salary: "38,735",
          country: "Korea, South",
          fontColor: "green"
        },
        {
          id: 5,
          name: "买五",
          salary: "63,542",
          country: "Malawi",
          fontColor: "green"
        },
        {
          id: 1,
          name: '卖五',
          salary: '98,615',
          country: 'Chile',
          fontColor: 'red'
        },
        {
          id: 2,
          name: '卖四',
          salary: '78,615',
          country: 'Portugal',
          fontColor: 'red'
        },{
          id: 3,
          name: "卖三",
          salary: "63,542",
          country: "Malawi",
          fontColor: "red"
        },
        {
          id: 4,
          name: '卖二',
          salary: '98,615',
          country: 'Chile',
          fontColor: 'green'
        },
        {
          id: 5,
          name: '卖一',
          salary: '78,615',
          country: 'Portugal',
          fontColor: 'green'
        }]
      },
      table2: {
        title: "leve2",
        columns: ['time','salary','order'],
        data: [{
          id: 1,
          time: "10:34:22",
          salary: "36.738",
          order: 8,
          fontColor: "red",
        },
        {
          id: 2,
          time: "10:35:22",
          salary: "23,789",
          order: 9,
          fontColor: "green"
        },
        {
          id: 3,
          time: "10:35:62",
          salary: "56,142",
          order: 15,
          fontColor: "green"
        },
        {
          id: 4,
          time: "10:36:12",
          salary: "38,735",
          order: 16,
          fontColor: "green"
        },
        {
          id: 5,
          time: "10:37:22",
          salary: "63,542",
          order: 21,
          fontColor: "green"
        }]
      }
    }
  },
  mounted() {
    //this.run()
  },
  computed: {
    level5Change() {
      const {currentTime, timeStep} = this
      return {currentTime, timeStep}
    }
  },
  watch: {
    speed(val) {
      console.log(val)
    },
    pulse(val) {
      console.log(val)
    },
    level5Change(val) {
      //console.log("currentTime:" + val)
      this.level5Table(val)
    },
   
    tradeDate(val) {
      console.log(val)
    }
  },
  methods: {
    silderChange(currentTime) {
      this.currentTime = currentTime
      this.chartData = mdata(currentTime.replaceAll(':', ''))
      this.$refs.timerChart.$emit('currentTime', this.chartData)
    },
    timeBackword(currentTime, timeStep) {
      this.currentTime = currentTime
      this.$refs.timerChart.$emit('level5Steep', currentTime, timeStep)
    },
    timeForward(currentTime, timeStep) {
      this.currentTime = currentTime
      this.$refs.timerChart.$emit('level5Steep', currentTime, timeStep)
    },
    // run() {
    //   setInterval(() => {
    //     let i = 5
    //     while (i--) {
    //       this.table1.data[i].salary = Math.round(Math.random() * 1000)
    //       this.table1.data[i + 5].salary = Math.round(Math.random() * 1000)
    //       this.table2.data[i].salary = Math.round(Math.random() * 100000)
    //     }
    //   }, 500);  
    // },
    level5Table({currentTime, timeStep}) {
      let index = indexOfRow(currentTime)
      let newData = mdata()
      let level5 = newData.level5[index]
      let volumn = newData.volumns[index]
      let c = timeStep
      this.table1.data[0].salary = (Math.random() + level5[c]).toFixed(2)
      this.table1.data[1].salary = (Math.random() + level5[c]).toFixed(2)
      this.table1.data[2].salary = (Math.random() + level5[c]).toFixed(2)
      this.table1.data[3].salary = (Math.random() + level5[c]).toFixed(2)
      this.table1.data[4].salary = (Math.random() + level5[c]).toFixed(2)
      this.table1.data[5].salary = (Math.random() + level5[c]).toFixed(2)
      this.table1.data[6].salary = (Math.random() + level5[c]).toFixed(2)
      this.table1.data[7].salary = (Math.random() + level5[c]).toFixed(2)
      this.table1.data[8].salary = (Math.random() + level5[c]).toFixed(2)
      this.table1.data[9].salary = (Math.random() + level5[c]).toFixed(2)
      this.table2.data[0].salary = (Math.random() * volumn).toFixed(0)
      this.table2.data[1].salary = (Math.random() * volumn).toFixed(0)
      this.table2.data[2].salary = (Math.random() * volumn).toFixed(0)
      this.table2.data[3].salary = (Math.random() * volumn).toFixed(0)
      this.table2.data[4].salary = (Math.random() * volumn).toFixed(0)
      
    }
  }
}
</script>

<style scoped>
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
</style>
